1 00:00:00,990 --> 00:00:07,170 In this lesson I'm gonna go over the tooling that we need for our web development work and most gonna 2 00:00:07,170 --> 00:00:11,640 give you a brief tour of the stop project for this module. 3 00:00:11,640 --> 00:00:15,360 Now to create a Web site we're gonna have to write our code somewhere. 4 00:00:15,420 --> 00:00:20,940 So the first thing we're going to need is a decent text editor and there's actually two text editors 5 00:00:20,970 --> 00:00:23,340 that I quite like and can recommend. 6 00:00:23,460 --> 00:00:30,690 And the first one is called Atom Atom was developed by the team at GitHub and it's completely open source. 7 00:00:30,690 --> 00:00:37,050 It supports a large number of languages including all the languages that we need including javascript 8 00:00:37,140 --> 00:00:40,710 each LCROSS and of course python. 9 00:00:40,860 --> 00:00:47,160 Now the really nice thing about atom is it has a really cool real time collaboration feature so you 10 00:00:47,160 --> 00:00:53,190 can work with others like in Google Docs which is great for team projects and if you're working on something 11 00:00:53,190 --> 00:00:55,390 with friends it's really quite neat. 12 00:00:55,620 --> 00:01:02,100 But GitHub the organization behind atom was actually recently acquired by Microsoft which brings me 13 00:01:02,100 --> 00:01:07,660 to the second text editor that I'm quite partial to and that's the s code. 14 00:01:07,710 --> 00:01:12,660 This code pretty much does everything atom does except maybe slightly faster. 15 00:01:12,780 --> 00:01:16,080 Microsoft seems to have done some optimization behind the scenes. 16 00:01:16,080 --> 00:01:22,200 So for this module I'm going to be using V as code now as always you can find the links to all of these 17 00:01:22,200 --> 00:01:27,810 Web sites to download your favorite text editor on our course resource page. 18 00:01:28,020 --> 00:01:33,690 The next thing that we're gonna need for this module are the Chrome developer tools. 19 00:01:33,690 --> 00:01:36,530 Chrome is the browser I'm going to be using for this project. 20 00:01:36,690 --> 00:01:39,860 So if you haven't got it already then install it now. 21 00:01:39,990 --> 00:01:46,690 And once you've done that head over to the lesson resources and download the math underscore garden 22 00:01:46,750 --> 00:01:53,870 on the score stub zip file in here you're gonna find the stop project that we're going to use. 23 00:01:53,910 --> 00:02:00,060 So go ahead and extract the zip file and then you should get a folder with a bunch of files that we're 24 00:02:00,060 --> 00:02:01,410 going to need. 25 00:02:01,470 --> 00:02:07,020 Now you can put this folder anywhere you want on your harddrive but I recommend just putting it into 26 00:02:07,050 --> 00:02:11,760 the MLK project folder that you're using for all your Jupiter notebooks. 27 00:02:11,760 --> 00:02:15,790 That way all the work that you're doing is gonna be in one place. 28 00:02:15,930 --> 00:02:20,400 If I take a look inside the stop project then you should see a number of files. 29 00:02:20,610 --> 00:02:23,670 You've got this index that each to a nail file. 30 00:02:23,670 --> 00:02:30,390 You've got a folder called C Ss and inside is a style starts the SS file and then you've got this folder 31 00:02:30,390 --> 00:02:35,910 called images where there are some dots as Fiji files. 32 00:02:35,910 --> 00:02:36,300 All right. 33 00:02:36,330 --> 00:02:40,880 So let's take a look at all of these files in V.S. code. 34 00:02:40,890 --> 00:02:46,580 Fire up visual studio code and then click on open folder on the welcome screen. 35 00:02:46,770 --> 00:02:56,450 Or alternatively go to file open and then select the math on a square garden discourse stuff folder. 36 00:02:56,830 --> 00:03:01,600 And after you've opened the folder you should see all the files and all the contents of that folder 37 00:03:01,720 --> 00:03:07,090 come up here in the Explorer pane and now you can navigate between the files simply by selecting them 38 00:03:07,420 --> 00:03:09,140 or double clicking on them. 39 00:03:09,400 --> 00:03:14,700 If you double click on the files then they show up in this kind of like tab view on the right hand side. 40 00:03:14,740 --> 00:03:16,570 Just kind of like browser tabs. 41 00:03:17,110 --> 00:03:22,120 So this explorer pane is really handy for navigating between the different files and if it gets in your 42 00:03:22,120 --> 00:03:27,520 way or you want to size it a bit differently than you can just click on the margins here and drag it 43 00:03:27,520 --> 00:03:30,250 around or you can click on this icon here to hide it. 44 00:03:31,570 --> 00:03:36,340 So now let's take a look at the different kind of files in the stop project. 45 00:03:36,400 --> 00:03:40,580 So on one hand we have this index that each terminal file on the other hand. 46 00:03:40,600 --> 00:03:47,680 We have this styles that see us as file and then thirdly we have these six different SPG files. 47 00:03:47,830 --> 00:03:53,800 Now I personally think that SPG files are probably the coolest thing since sliced bread because even 48 00:03:53,800 --> 00:03:56,830 though it looks like code it's actually an image. 49 00:03:56,980 --> 00:04:01,650 Now images there usually in the more familiar formats of j peg or PSG. 50 00:04:01,950 --> 00:04:05,380 So what's so great about SPG files. 51 00:04:05,380 --> 00:04:09,580 Well let's compare a PSG file to an SPG file. 52 00:04:09,580 --> 00:04:14,470 I've got an image here in my downloads folder and I'm just gonna open it with Firefox and I'm going 53 00:04:14,470 --> 00:04:15,470 to zoom in. 54 00:04:15,550 --> 00:04:22,960 So what you can see here is this whole thing pixilated the quality degrades as you zoom in to 300 percent. 55 00:04:22,960 --> 00:04:28,840 But if I do the very same thing with an SPG file let's see what happens. 56 00:04:28,840 --> 00:04:33,190 Again I'm going to 300 percent and it just stays tack shop. 57 00:04:33,190 --> 00:04:38,800 It's almost as if we're in an episode of CSI and they're zooming in on the security camera footage and 58 00:04:39,130 --> 00:04:41,200 able to see all this detail. 59 00:04:41,200 --> 00:04:47,500 The reason that the SPG files don't pixilated is because they're actually code as Fiji is a vector image 60 00:04:47,500 --> 00:04:54,070 format and we're going to be using this in our project so that our images stay sharp and looking good 61 00:04:54,340 --> 00:04:57,800 no matter what type of screen that they're displayed on. 62 00:04:57,800 --> 00:05:02,830 Now let's take a look at the second most important tools that we're gonna be using as part of this module. 63 00:05:03,020 --> 00:05:05,200 And those are the Chrome developer tools. 64 00:05:05,750 --> 00:05:13,550 So go ahead and right click on the next thought HCM Mal file and open it with Google Chrome at this 65 00:05:13,550 --> 00:05:19,390 point you should see a website that looks something like this to pull up the Chrome developer tools. 66 00:05:19,430 --> 00:05:26,240 Click on the overflow menu right here on the right hand side and then go to more tools and then developer 67 00:05:26,240 --> 00:05:27,250 tools. 68 00:05:27,290 --> 00:05:32,080 You can also make a note of the keyboard shortcut right here to bring them up more quickly. 69 00:05:32,120 --> 00:05:35,780 Now the developer tools that you're seeing on your screen should look something like this. 70 00:05:35,810 --> 00:05:41,210 You can of course position them anywhere you fancy so you can either have them on the right hand side 71 00:05:41,210 --> 00:05:47,270 like me or look at them below like this but I prefer them docked here on the right. 72 00:05:47,270 --> 00:05:48,350 It's quite good. 73 00:05:48,350 --> 00:05:51,110 Now what are the Chrome developer tools really useful for. 74 00:05:51,620 --> 00:05:58,560 Well first off we're seeing the code side by side with the browsers interpretation of our code. 75 00:05:59,060 --> 00:06:05,810 So on the right hand side I've got the HMO and on the left hand side I've got what the user will eventually 76 00:06:05,810 --> 00:06:11,960 see if they pull up the Web site and what's really really useful about the Chrome developer tools is 77 00:06:11,960 --> 00:06:18,560 that when you hover over a particular bit of the code it will highlight that part on the left hand side 78 00:06:18,890 --> 00:06:20,560 on the actual Web site. 79 00:06:20,570 --> 00:06:27,180 So for example I've got the body of my web site right here and my body has two sections. 80 00:06:27,230 --> 00:06:30,170 It has this section and it has this section. 81 00:06:30,440 --> 00:06:36,080 If I click on the little arrow here I can expand the particular section to take a peek inside and see 82 00:06:36,080 --> 00:06:38,660 what's contained therein in my first section. 83 00:06:38,660 --> 00:06:45,320 I've got a heading which I can also expand and there I can hone in on a particular element like the 84 00:06:45,410 --> 00:06:52,570 three here or the plus sign or the number two and in the second section I've got my button right here 85 00:06:53,150 --> 00:06:57,410 so you can see that the different parts of code are highlighted on the right hand side. 86 00:06:58,100 --> 00:07:01,730 But the really neat thing about Chrome is that I can also go the other way around. 87 00:07:01,880 --> 00:07:08,210 So if I click on this little icon here where I can select an element in the page to inspect it then 88 00:07:08,210 --> 00:07:14,800 I can highlight a particular element and it will point me to the line of code in the index that H.M. 89 00:07:14,810 --> 00:07:19,190 l file where that pertains to this element. 90 00:07:19,190 --> 00:07:26,760 So here for example I'm hovering over the button and this part of my index H2 mail file is highlighted. 91 00:07:27,110 --> 00:07:33,350 I can even double click into here and change something so what says button text here I can overwrite 92 00:07:33,350 --> 00:07:38,020 this and type something like Hello exclamation mark. 93 00:07:38,180 --> 00:07:45,710 And when I hit enter then my render here on the left hand side will be updated but one thing to note 94 00:07:45,830 --> 00:07:50,120 is that this actually has not changed the file that's saved on my computer. 95 00:07:50,870 --> 00:07:57,500 So if we go back to visual studio code and I scroll down in the index that each time l file to where 96 00:07:57,500 --> 00:08:04,400 I've got the button which is on line number 28 then I can still see that this is the original text. 97 00:08:04,400 --> 00:08:09,760 So anything you do here does not actually get saved on the file. 98 00:08:09,980 --> 00:08:14,140 So let's take a look if we can identify these elements in Visual Studio code. 99 00:08:14,810 --> 00:08:21,110 So we've already identified the button which is right here and we can also identify our heading which 100 00:08:21,110 --> 00:08:30,410 contains the number three plus the two and the equals the really nice thing about the S code is that 101 00:08:30,800 --> 00:08:35,320 C you know this code is looking a little bit strange and you haven't seen it before. 102 00:08:35,420 --> 00:08:41,650 One of the things you can actually do is just hover over one of these elements and read a short description. 103 00:08:41,690 --> 00:08:49,000 So for example the H2 element represents a section heading and if I hover over this bit here that I 104 00:08:49,000 --> 00:08:56,380 can read that the button element represents a button labeled by its contents and if I hover over body 105 00:08:56,500 --> 00:09:01,350 that I can see the body element represents the content of the document. 106 00:09:01,540 --> 00:09:04,420 So it actually is this index that each time l file. 107 00:09:04,540 --> 00:09:07,820 Well this is the structure of our website. 108 00:09:07,930 --> 00:09:14,840 It's in this file that we've got the different elements that are going to be displayed to the user. 109 00:09:14,860 --> 00:09:17,740 So at this point there's only one file left to talk about right. 110 00:09:17,860 --> 00:09:20,510 And that's the styles don't see ISIS file. 111 00:09:20,540 --> 00:09:27,280 You can already tell from the name that this file is probably something to do with styling the SPG files 112 00:09:27,400 --> 00:09:32,860 are the image files the index that each time all file is the structure of our website. 113 00:09:33,250 --> 00:09:37,560 So the CSX file actually has something to do with the styling. 114 00:09:38,230 --> 00:09:41,680 And we can see this again in the Chrome developer tools. 115 00:09:41,680 --> 00:09:48,580 So if I've got the button highlighted here then a little bit further to the right I can see a bunch 116 00:09:48,580 --> 00:09:54,970 of the buttons properties and these are the properties that style the button and we can actually see 117 00:09:55,210 --> 00:10:00,730 what each of these properties does by taking her and taking any of them right here. 118 00:10:00,770 --> 00:10:06,970 So let's take this border radius for example the border it is is 20 pixels and if I un ticket then I 119 00:10:06,970 --> 00:10:12,810 can see that we've got a square with no rounded corners. 120 00:10:12,870 --> 00:10:14,260 Now what about the padding. 121 00:10:14,270 --> 00:10:15,940 What is the padding do. 122 00:10:15,960 --> 00:10:17,590 Well let's find out. 123 00:10:17,660 --> 00:10:23,960 We can simply take an antic the padding property and we can see the difference that it makes to the 124 00:10:23,960 --> 00:10:33,230 styling of our button same with the font size if I uncheck font size of 70 pixels then the button gets 125 00:10:33,230 --> 00:10:40,530 his default font size and the same of course is true of the font family simply by UN taking this style. 126 00:10:40,550 --> 00:10:47,870 We go from the custom font which is called Just another hand to the default font and then I sing with 127 00:10:47,870 --> 00:10:52,220 the Chrome developer tools as we can pretty much do this for every other element. 128 00:10:52,580 --> 00:10:58,640 So let's take the body for example if we go to the body and we unstick the background color which is 129 00:10:58,640 --> 00:10:59,830 this nice blue. 130 00:10:59,900 --> 00:11:02,930 Then we simply get a white background. 131 00:11:02,930 --> 00:11:05,990 So now that we know that these are the different styles. 132 00:11:06,110 --> 00:11:10,910 Let's take a look at what this styles that CSX fire looks like in Visual Studio code. 133 00:11:11,810 --> 00:11:13,870 And it looks something like this. 134 00:11:13,910 --> 00:11:20,900 We've got a particular element C like the body and it's got a bunch of properties here that we're setting 135 00:11:21,110 --> 00:11:27,370 like the background color and down here we have the styling for the button. 136 00:11:27,840 --> 00:11:32,940 And just like with the index that each time l file a visual studio code is very very good at giving 137 00:11:32,940 --> 00:11:38,150 us a little bit of background and quick help if we hover over any of these things. 138 00:11:38,250 --> 00:11:45,240 So background hyphen color as the name suggests sets the background color of an element and the border 139 00:11:45,240 --> 00:11:49,920 radius defines the radius of the outer border edge. 140 00:11:49,920 --> 00:11:52,620 So every time you see something that you're not quite sure about. 141 00:11:52,800 --> 00:11:58,080 Visual Studio code is really really good at helping you out and giving a little bit of background information 142 00:11:58,290 --> 00:12:01,200 without having to go into Google and searching for it there. 143 00:12:02,010 --> 00:12:08,220 So this concludes the very very quick tool of the stop Project and the tooling that we're gonna use 144 00:12:08,700 --> 00:12:12,620 namely the US Code and the chrome developer tools. 145 00:12:12,780 --> 00:12:17,520 And if you're gonna remember one thing from this lesson then remember this. 146 00:12:17,550 --> 00:12:23,670 Remember that HDL has everything to do with the structure of the website. 147 00:12:23,790 --> 00:12:29,490 It's in the H Jamelle file where all the elements of the website are listed like the headings and the 148 00:12:29,490 --> 00:12:31,610 titles and the buttons and so on. 149 00:12:32,610 --> 00:12:36,860 And in the SS file we've got the styling for all of these elements. 150 00:12:37,640 --> 00:12:44,040 It's in the C Ss file where we set the font size and the padding and the colors and so on. 151 00:12:44,700 --> 00:12:49,800 Now in the next lesson we're going to learn a lot more about each team L and C CFS and we're gonna be 152 00:12:49,800 --> 00:12:53,440 writing some of our own code to style our website. 153 00:12:53,490 --> 00:12:54,270 I'll see you there.